<template>
    <el-container style="height: 100%;">
        <el-header>
            <Header @hander-siderbar="handerSiderbar">
                    <span slot="siderbarTriggerIcon">
                        <i :class="classSiderbarTriggerObj"></i>
                    </span>
            </Header>
        </el-header>

        <div class = "divider-container"></div>

        <el-container>
            <el-aside :class="classSideObj" >
                <sidebar :collapse="collapse"/>
            </el-aside>
            <el-aside :class="classDrawerSideObj">
                <el-drawer
                        :visible.sync="drawer"
                        :with-header="false"
                        :direction="direction"
                        :size="size">
                    <sidebar :collapse="collapse"/>
                </el-drawer>
            </el-aside>
            <el-main>
                <Content/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {Sidebar, Content, Header} from './components'
    import routes from '@/router/router'

    export default {
        name: "Main",
        data() {
            return {
                drawer:  false,
                direction: 'ltr',
                size: '210px',
                collapse: false,
                screenWidth: document.body.clientWidth
            }
        },
        computed: {
            ...mapState('main', ['activeTab']),
            classSideObj() {
                return {
                    'hide-sidebar-container hidden-md-and-down': this.collapse,
                    'open-sidebar-container hidden-md-and-down': !this.collapse
                }
            },
            classDrawerSideObj() {
                return {
                    'hide-drawer-sidebar-container hidden-lg-and-up': true
                }
            },
            classSiderbarTriggerObj() {
                return {
                    'el-icon-s-unfold': (this.screenWidth > 1199 && this.collapse) || (this.screenWidth < 1199 && true),
                    'el-icon-s-fold': (this.screenWidth > 1199 && !this.collapse) || (this.screenWidth < 1199 && false)
                }
            }
        },
        components: {
            Sidebar,
            Content,
            Header
        },
        methods: {
            ...mapMutations('main', ['addTabs']),
            ...mapActions('main', ['createRoutes']),
            handerSiderbar() {
                if(this.screenWidth < 1199) {
                    this.drawer = true;
                    this.collapse = false;
                } else {
                    this.collapse = !this.collapse;
                    this.drawer = false;
                }
            }
        },
        created() {
            this.$nextTick(() => {
                if (this.activeTab != this.$route.name) {
                    this.addTabs({title: this.$route.meta.title, name: this.$route.name});
                }
            });
        },
        mounted() {
            const that = this;
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth;
                    that.screenWidth = window.screenWidth;
                })();
            }
        },
        watch: {
            screenWidth(val){
                console.log(val)
                if(val > 1199) {
                    this.drawer = false;
                } else {
                    this.collapse = false;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/main";
</style>
